
<template>
  <div id="frezze" >
    <el-dialog
      title="请选择冻结原因"
      :visible.sync="showFreezeDialog"
      :before-close="cancel"
      size="tiny">
      <el-select v-model="defaultOption" placeholder="请选择" >
        <el-option
          v-for="item in options"
          :key="item.reson_id"
          :label="item.name"
          :value="item.reson_id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="cancel">取 消</el-button>
    <el-button type="primary" @click="sureFreeze">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import freezeReasonService from '../freezeReasonManager/FreezeReasonService.js'
  import userService from './UserService.js'

  export default {
    data () {
      return {
        options: [],
        defaultOption: '',
        showFreezeDialog: false
      }
    },
    props: {
      showDialog: {
        type: Boolean
      },
      currentUid: {
        type: Number
      }
    },
    created: function () {
      var _this = this
      freezeReasonService.getFreezeReasons().then(response => {
        console.log(response)
        if (response && response.data && response.data.hasOwnProperty('code') && response.data.code === 0) {
          _this.options = response.data.data
          _this.defaultOption = _this.options[0].reson_id
        } else {
          alert('冻结用户失败 ' + response.data.msg)
        }
      }, response => {
        console.log(response)
        alert('冻结用户失败 ' + response)
      })
      this.showFreezeDialog = this.showDialog
    },
    methods: {
      sureFreeze () {
        userService.freezeUser(this.currentUid, this.defaultOption).then(response => {
          console.log(response)
          this.showFreezeDialog = false
          this.$emit('closeDialog', true)
        }, response => {
          console.log(response)
        })
      },
      cancel () {
        this.showFreezeDialog = false
        this.$emit('closeDialog', false)
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .container{
    border: 1px solid #fff;
  }
</style>
